<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/before/css/common.css" rel="stylesheet" tyle="text/css" />
    <link href="/before/css/style.css" rel="stylesheet" type="text/css" />
    <link href="/before/fonts/iconfont.css" rel="stylesheet" type="text/css" />
    <script src="/before/js/jquery.min.1.8.2.js" type="text/javascript"></script>
    <script src="/before/js/payfor.js" type="text/javascript"></script>
    <script src="/before/js/lrtk.js" type="text/javascript"></script>
    <script src="/before/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="/before/js/common_js.js" type="text/javascript"></script>
    <script src="/before/js/footer.js" type="text/javascript"></script>
    <script src="/before/js/jquery.jumpto.js" type="text/javascript"></script>
    <!--引用vue的js-->
    <script src="/after/js/vue/vue.min.js"></script>
    <!--分页插件-->
    <script src="/after/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/after/js/layer/layer.js" charset="utf-8"></script>
    <title>购物车</title>
</head>
<script type="text/javascript">
    <!--勾选框js-->
    $(document).ready(function () {
        //全选
        $("#CheckedAll").click(function () {
            if (this.checked) {                 //如果当前点击的多选框被选中
                $('input[type=checkbox][name=checkitems]').attr("checked", true);
            } else {
                $('input[type=checkbox][name=checkitems]').attr("checked", false);
            }
        });
        $('input[type=checkbox][name=checkitems]').click(function () {
            var flag = true;
            $('input[type=checkbox][name=checkitems]').each(function () {
                if (!this.checked) {
                    flag = false;
                }
            });
            if (flag) {
                $('#CheckedAll').attr('checked', true);
            } else {
                $('#CheckedAll').attr('checked', false);
            }
        });
        //输出值
        $("#send").click(function () {

            if($("input[type='checkbox'][name='checkitems']:checked").attr("checked")){
                var str = "";
                $('input[type=checkbox][name=checkitems]:checked').each(function () {
                    str += $(this).val() + ",";
                })
                if (panduan()==true){
                    $.ajax({
                        url:"/shop/delAllShop.do",
                        type:'post',
                        dataType:'json',
                        data:{
                            shuzu:str
                        },
                        error:function () {
                            alert("错误");
                        },
                        success:function (msg) {
                            if(msg.falg=true){
                                alert("成功删除");
                                //改变勾选状态
                                $('input[type=checkbox][name=checkitems]').attr("checked", false);
                            }else{
                                alert("删除失败");
                            }
                            getShopList();
                        }
                    });
                }else{
                    alert("已取消删除");
                    getShopList();
                }
            }else{
                var str = "你未选中任何商品，请选择后在操作！";
                layer.msg(str);
            }
        });
    })
</script>
<body>
<!--头-->
<div id="page2"></div>
<!--***************************************************************************************************************************-->
<!--购物车样式图层-->
<div style="display:none">
<#if Session.NowCustom?exists>
<h2><span id="xm" name="xm">${NowCustom.name}</span></h2>
</#if>
</div>
<div class="Inside_pages">
    <div class="shop_carts">
        <div class="Process"></div>
        <div class="Shopping_list">
            <div class="title_name">
                <ul>
                    <li class="checkbox"></li>
                    <li class="name">商品名称</li>
                    <li class="scj">市场价</li>
                    <li class="bdj">本店价</li>
                    <li class="sl">购买数量</li>
                    <li class="xj">小计</li>
                    <LI class="cz">操作</LI>
                </ul>
            </div>
            <div class="shopping" id="shops">
                <center v-if="result==''" style="font-size: 30px;color:red">购物车中没有东西,快去<a href="/stageregist/toIndex.do">购物</a>吧</center>
                <table class="table_list" v-for="(item,index) in result">
                    <tr class="tr">
                        <td class="checkbox">
                            <input name="checkitems"
                                   type="checkbox" :value="item.id" @click="moneyall();"/>
                        </td>
                        <td class="name">
                            <div class="img">
                                <a href="javascript:void(0);">
                                    <img src="/before/images/ad-4.jpg"/>
                                </a>
                            </div>
                            <div class="p_name">
                                <a href="javascript:void(0);">{{item.book_name}}</a>
                            </div>
                        </td>
                        <td class="scj sp">
                            <span id="Original_Price_1">{{item.book_price*2}}</span>
                        </td>
                        <td class="bgj sp" >
                            <span id="price_item_1">{{item.book_price}}</span>
                        </td>
                        <td class="sl">
                            <div class="Numbers">
                                <!--点击给加减方法;传目标地址index-->
                                <a href="javascript:void(0)" class="" @click="subtract(index)">-</a>
                                <input type="text" name="qty_item_" id="qty_item_1" class="number_text" v-model="item.book_num">
                                <a href="javascript:void(0)" class="" @click="add(index)">+</a>
                            </div>
                        </td>
                        <td class="xj" >
                            <!--直接相乘求小计总数-->
                            <span id="total_item_1">{{(item.book_price*item.book_num).toFixed(2)}}</span>
                            <input type="hidden" name="total_price" id="total_price" value="">
                        </td>
                        <td class="cz">
                            <p><a href="javascript:void(0);" @click="delShop(item.id)">删除</a><p>
                        </td>
                    </tr>
                    </table>
                <div class="sp_Operation clearfix">
                    <div class="select-all">
                        <div class="cart-checkbox">
                            <input type="checkbox" id="CheckedAll" name="toggle-checkboxes" class="jdcheckbox" clstag="clickcart">全选</div>
                        <div class="operation">
                            <a href="javascript:void(0);" id="send">删除选中的商品</a>
                        </div>
                    </div>
                    <!--结算-->
                    <div class="toolbar_right">
                        <ul class="Price_Info">
                            <li class="p_Total">
                                <label class="text">商品总价：</label>
                                <span class="price sumPrice" id="change"></span>
                            </li>
                            <li class="Discount">
                                <label class="text">已&nbsp;&nbsp;节&nbsp;&nbsp;省：</label>
                                <span class="price" id="Preferential_price"></span>
                            </li>
                        </ul>
                        <div class="btn">
                            <form action="/shop/jiezhi.do" method="post">
                                <input  id="zifuchuan" name="zifuchuan" type="hidden" />
                                <input  id="zongjia" name="zongjia" type="hidden" /><br/>
                                <input  id="shuliang" name="shuliang" type="hidden" /><br/>
                                <input type="submit" class="cartsubmit" value="提交" onclick="chuan();"/>
                            </form>
                            <a class="continueFind" href="/stage/LJproduct_list.ftl"></a>
                        </div>
                    </div>
                    <!--分页*************************************************************************-->
                </div>
            </div>
        </div>
    </div>
</div>
<!--*************************************************************************************************************************************-->
<!--底部样式-->


                    <script type="text/javascript">
                        jQuery(".picMarquee-left").slide({
                            mainCell:".bd ul",
                            autoPlay:true,
                            effect:"leftMarquee",
                            vis:2,interTime:50
                        });
                    </script>
<!--尾-->
<div id="page3"></div>

<div id="page1"></div>
<script>
    $("#page2").load("/czgIndexTop/getBtype.do");
    $("#page3").load("/stage/Czg_index_foot.ftl");
    $("#page1").load("/stage/LQ_right.ftl");
</script>
<script>
    var name="";
    <!--购物车数量选择-->
    var shops=new Vue({
        el:'#shops',
        data:{
            result:[]
        },
        methods: {
            //加号上绑定的事件
            add: function (index) {
                var vm = this;
                //当前位置数量自加
                vm.result[index].book_num++;
                moneyall();
            },
            //减号上绑定的事件
            subtract: function (index) {
                var vm = this;
                //当前位置数量自减
                vm.result[index].book_num--;
                //判断
                if (vm.result[index].book_num <= 0) {
                    alert("商品数量不能小于1");
                    vm.result[index].book_num = 1;
                    moneyall();
                }else{
                    moneyall();
                }
            }
        }
    });
    <!--计算勾选总价拿出来计算-->
    var moneyall = function(){
        var allp = 0;
        for (var i = 0; i < shops.result.length; i++) {
            $("input[name='checkitems']:checked").each(function(){
                if($(this).val()==shops.result[i].id){
                    allp +=shops.result[i].book_num * shops.result[i].book_price;
                }
            })
        }
        $("#change").html(allp.toFixed(2));
        $("#Preferential_price").html((allp*0.6).toFixed(2));
    }
    <!--查询购物车表-->
    var getShopList=function(curr){
        name=document.getElementById("xm").innerHTML;
        if(name==""){
            alert("请登录");
            window.location.href="index.ftl";
        }else{
            $.ajax({
                url:'/shop/chaShopByCustom.do',
                type:'post',
                dataType:'json',
                data:{
                    name:name
                },
                error:function () {
                    alert("错误");
                },
                success:function (msg) {
                    shops.result = msg.list;
                }
            });
        }
    }
    getShopList();
    <!--判断是否删除-->
    function panduan() {
        if(confirm('确定要执行此操作吗?')){
            return true;
        }
        return false;
    }
    <!--单行删除-->
    function delShop(obj) {
        if (panduan()==true){
            $.ajax({
                url:"/shop/delShop.do",
                type:'post',
                dataType:'json',
                data:{
                    id:obj
                },
                error:function () {
                    alert("错误");
                },
                success:function (msg) {
                    if(msg.falg == true){
                        alert("已成功删除!");
                    }else{
                        alert("删除失败!");
                    }
                    getShopList();
                }
            });
        }else{
            alert("已取消删除");
            getShopList();
        }
    }
    <!--判断是否选中；选中取id传到后台查对应的数据-->
    var chuan=function () {
        var zifuchuan="";
        var shuliang="";
        var zongjia=0;
        for (var i = 0; i < shops.result.length; i++) {
            $("input[name='checkitems']:checked").each(function(){
                if($(this).val()==shops.result[i].id){
                    zifuchuan +=shops.result[i].id + ",";
                    shuliang+=shops.result[i].book_num+",";
                    zongjia+=shops.result[i].book_num*shops.result[i].book_price;
                }
            })
        };
        document.getElementById("zifuchuan").value=zifuchuan;
        document.getElementById("shuliang").value=shuliang;
        document.getElementById("zongjia").value=zongjia;
    }
    //  显示客服聊天界面
    function showTalk(){
        layer.open({
            type:2,
            title:'客服聊天',
            fix:'false',
            maxmin:true,
            area:['800px','700px'],
            content:'/main/skipToTalk.do',
            end:function(){
            }
        })
    }
</script>
</body>
</html>